<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <!-- 引入layui -->
        <script src="../libs/layui/layui.js"></script>
        <link rel="stylesheet" href="../libs/layui/css/layui.css" />
        <!-- 示例页面专用样式,和扩展一点关系都没有 -->
        <link rel="stylesheet" href="./css/index.css" />
        <!-- 配置扩展 -->
        <script>
            // 配置扩展路径
            layui.config({
                base: "../libs/layui_exts/",
            });
            // 注册扩展
            layui.extend({
                tableSelected: "tableSelected/index",
            });
        </script>
        <script>
            // 祖传IE各类兼容性问题hack函数, 与扩展无关, 无需了解
            if (typeof Object.assign != "function") {
                Object.assign = function (target) {
                    "use strict";
                    if (target == null) {
                        throw new TypeError("Cannot convert undefined or null to object");
                    }

                    target = Object(target);
                    for (var index = 1; index < arguments.length; index++) {
                        var source = arguments[index];
                        if (source != null) {
                            for (var key in source) {
                                if (Object.prototype.hasOwnProperty.call(source, key)) {
                                    target[key] = source[key];
                                }
                            }
                        }
                    }
                    return target;
                };
            }
        </script>
        <title>tableSelected - 表格选择器</title>
    </head>
    <body>
        <!-- 祖传示例布局 -->
        <div class="board">
            <div class="board-title">tableSelected - 表格选择器</div>
            <div class="board-content">
                <div class="layui-elem-quote">为了方便大家掌握本扩展, 本扩展调用的接口是真实的, 线上接口受限于稳定性等原因不保证的一定100%可用, 因此, 有条件的可参考 data 目录下的模拟返回搭建本地接口环境测试!</div>
                <form class="layui-form" action="">
                    <div class="layui-form-item">
                        <label class="layui-form-label">多选</label>
                        <div class="layui-input-block">
                            <input type="text" name="checkbox_1" placeholder="请选择用户" autocomplete="off" class="layui-input checkbox" />
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">多选默认</label>
                        <div class="layui-input-block">
                            <input type="text" name="checkbox_2" placeholder="请选择用户" value="1,2,3,11,21,22,23" autocomplete="off" class="layui-input checkbox" />
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">单选</label>
                        <div class="layui-input-block">
                            <input type="text" name="radio_1" placeholder="请选择用户" autocomplete="off" class="layui-input radio" />
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">单选默认</label>
                        <div class="layui-input-block">
                            <input type="text" name="radio_2" placeholder="请选择用户" value="1" autocomplete="off" class="layui-input radio" />
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">自动更新</label>
                        <div class="layui-input-inline">
                            <input type="text" name="checkbox_auto" placeholder="直接更新无需确认" autocomplete="off" class="layui-input checkbox_auto" />
                        </div>
                        <div class="layui-input-inline">
                            <input type="text" name="radio_auto" placeholder="直接更新无需确认" autocomplete="off" class="layui-input radio_auto" />
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">各种事件</label>
                        <div class="layui-input-inline">
                            <input type="text" name="checkbox_event" placeholder="多选框的各种事件" autocomplete="off" class="layui-input checkbox_event" />
                        </div>
                        <div class="layui-input-inline">
                            <input type="text" name="radio_event" placeholder="单选框的各种事件" autocomplete="off" class="layui-input radio_event" />
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button class="layui-btn" lay-submit lay-filter="formDemo">数据汇总</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>

        <!-- 使用扩展 -->
        <script>
            // 基本写法
            layui.use(["tableSelected", "form", "layer", "jquery"], function () {
                var tableSelected = layui.tableSelected;
                var form = layui.form;
                var layer = layui.layer;
                var $ = layui.$;

                form.on("submit(formDemo)", function (data) {
                    layer.open({
                        title: "表单信息",
                        content: "<pre>" + JSON.stringify(data.field, null, 4) + "</pre>",
                        btn: ["确定"],
                        area: ["600px", "auto"],
                    });
                    return false;
                });

                // 提供的2个免费API
                var listApi = "http://kuozhan.ml/table_selected/list";
                var infoApi = "http://kuozhan.ml/table_selected/detail";

                // 创建配置
                function tableConfig(config) {
                    return Object.assign(
                        {
                            url: listApi,
                            height: 240,
                            page: true,
                            response: {
                                statusCode: 200,
                            },
                            parseData: function (res) {
                                return {
                                    code: res.code,
                                    msg: res.msg,
                                    count: res.data.total,
                                    data: res.data.data,
                                };
                            },
                        },
                        config
                    );
                }

                var tableConfig1 = tableConfig({
                    cols: [
                        [
                            {
                                type: "checkbox",
                                fixed: "left",
                            },
                            {
                                field: "id",
                                fixed: "left",
                                width: 60,
                                title: "ID",
                            },
                            {
                                field: "name",
                                width: 100,
                                title: "用户名",
                            },
                            {
                                field: "age",
                                width: 60,
                                align: "center",
                                title: "年龄",
                            },
                            {
                                field: "city",
                                title: "城市",
                            },
                        ],
                    ],
                });
                var tableConfig2 = tableConfig({
                    cols: [
                        [
                            {
                                type: "radio",
                                fixed: "left",
                            },
                            {
                                field: "id",
                                fixed: "left",
                                width: 60,
                                title: "ID",
                            },
                            {
                                field: "name",
                                width: 100,
                                title: "用户名",
                            },
                            {
                                field: "age",
                                width: 60,
                                align: "center",
                                title: "年龄",
                            },
                            {
                                field: "city",
                                title: "城市",
                            },
                        ],
                    ],
                });

                (function () {
                    // 常规玩法

                    tableSelected.render(".checkbox", {
                        event: {
                            formatRowKey: function (data) {
                                $.getJSON(infoApi, { id: data.value }, function (res) {
                                    if (res.code == 200) {
                                        data.next(res.data);
                                    }
                                });
                            },
                        },
                        tableConfig: tableConfig1,
                    });

                    tableSelected.render(".radio", {
                        limit: 1,
                        event: {
                            formatRowKey: function (data) {
                                $.getJSON(infoApi, { id: data.value }, function (res) {
                                    if (res.code == 200) {
                                        data.next(res.data);
                                    }
                                });
                            },
                        },
                        tableConfig: tableConfig2,
                    });
                })();

                (function () {
                    // 位置尺寸及自动渲染

                    tableSelected.render(".checkbox_auto", {
                        position: "up",
                        autoRender: true,
                        width: 600,
                        tableConfig: tableConfig1,
                    });

                    tableSelected.render(".radio_auto", {
                        position: "up",
                        limit: 1,
                        autoRender: true,
                        width: 600,
                        tableConfig: tableConfig2,
                    });
                })();

                (function () {
                    // 各种事件

                    var event = {
                        // 生命周期类, 一般用不到了
                        // 具体想知道区别的直接去学习vue的生命周期思路就行了
                        beforeCreate: function () {
                            console.log("插件准备开始运行");
                        },
                        created: function () {
                            console.log("虚拟DOM创建完毕, 还未塞到页面上");
                        },
                        beforeMount: function () {
                            console.log("虚拟DOM组装完毕, 但是嘿! 虚晃一枪, 还是没有塞到页面上! 还是个虚拟的DOM");
                        },
                        mounted: function (dom) {
                            console.log("这回是真的DOM了, 已经塞到页面了, 返回各种扩展创建的DOM供你进一步的操作", dom);
                        },
                        beforeUpdate: function (data) {
                            console.log("当单选框或复选框被选中, 扩展逻辑处理之前", data);
                        },
                        updated: function (data) {
                            console.log("当单选框或复选框被选中, 扩展逻辑处理之后", data);
                        },
                        // 预处理, 与处理的意思是通常携带 next 函数
                        // 你可以吧处理完的内容使用 next 传递给扩展使用
                        formatRowKey: function (data) {
                            console.log("多选rowKey→echoKey预处理逻辑, 具体看文档", data);
                        },
                        // 普通回调
                        tableDone: function (res) {
                            console.log("当layui的表格创建完毕触发, layui本身done给你啥数据我这里就给你啥数据", res);
                        },
                        change: function (data) {
                            console.log("和 updated 理论上没任何区别, 只是语义化一点", data);
                        },
                        checked: function (data) {
                            console.log("和 updated 理论上没任何区别, 只是语义化一点", data);
                        },
                        submit: function (data) {
                            console.log("点击提交按钮", data);
                        },
                        search: function (data) {
                            console.log("点击搜索按钮时", data);
                        },
                        checkbox: function (data) {
                            console.log("仅 checkbox 触发, 返回选中行", data);
                        },
                        radio: function (data) {
                            console.log("仅 radio 触发, 返回选中行", data);
                        },
                    };

                    tableSelected.render(".checkbox_event", {
                        position: "up",
                        width: 600,
                        tableConfig: tableConfig1,
                        event: event,
                    });

                    tableSelected.render(".radio_event", {
                        position: "up",
                        limit: 1,
                        width: 600,
                        tableConfig: tableConfig2,
                        event: event,
                    });
                })();
            });
        </script>
    </body>
</html>
